<template>
    <el-dialog @close="reset" title="新增/编辑" v-model="visible">
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
            <el-form-item label="图片" prop="img">
                <el-upload :on-change="chooseImg" drag ref="upload" :auto-upload="false" :limit="1"
                    :on-exceed="() => ElMessage.warning('此处只能上传一张图片')" v-model:file-list="fileList" action="#"
                    list-type="picture-card">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <el-form-item label="标题" prop="title">
                <el-input v-model="formData.title" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="链接" prop="url">
                <el-input v-model="formData.url" placeholder="请输入链接地址"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="formData.status">
                    <el-radio :value="1">启用</el-radio>
                    <el-radio :value="2">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="reset">取消</el-button>
            <el-button type="primary" @click="submit">确认提交</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import { bannerAdd, bannerUpdate } from '@/utils/api'
import { ElMessage } from 'element-plus';
const { appContext: { config: { globalProperties: { baseUrl } } } } = getCurrentInstance()
const emit = defineEmits(['updateBanner'])
const initFormData = {
    title: '',
    img: null,
    url: '',
    status: ''
}
const { bus_id } = defineProps(['bus_id'])
const visible = ref(false)
const formRef = ref(null)
// 照片列表
const fileList = ref([])
const upload = ref(null)
const formData = ref({ ...initFormData })
const chooseImg = ({ raw }) => {
    formData.value.img = raw
}
// 接收待编辑菜单数据
const getEditData = (data) => {
    formData.value = { ...data }
    visible.value = true
    fileList.value = [{ url: baseUrl + data.img }]
}
const rules = {
    title: { required: true, message: '请输入标题', trigger: 'blur' },
    // url: { required: true, message: '请输入链接地址', trigger: 'blur' },
    status: { required: true, message: '请选择状态', trigger: 'blur' },
}
// 重置数据
const reset = () => {
    // 重置表单
    formRef.value.resetFields()
    formData.value = { ...initFormData }
    // 关闭对话框
    visible.value = false
    // 删除id, 否则之后的操作会收到影响
    delete formData.value.id
    // 移除upload组件中用户选择的图片
    upload.value.clearFiles()
}
const submit = () => {
    formRef.value.validate(async valid => {
        if (valid) {
            let res
            const fd = new FormData();
            if (bus_id) formData.value.bus_id = bus_id
            for (let key in formData.value) {
                if (formData.value[key]) {
                    fd.append(key, formData.value[key])
                }
            }
            if (formData.value.id > 0) {
                res = await bannerUpdate(fd);
            } else {
                res = await bannerAdd(fd);
            }
            const { data } = res
            if (data.code === 200) {
                ElMessage.success(data.msg)
                // 重置表单
                formRef.value.resetFields()
                // 关闭对话框
                visible.value = false
                // 删除id, 否则之后的操作会收到影响
                delete formData.value.id
                // 通知父组件更新
                emit('updateBanner')
            } else {
                ElMessage.error(data.msg)
            }
        }
    })
}
defineExpose({ visible, getEditData })
</script>

<style lang="scss" scoed>
.textarea {
    resize: none;
    border: 1px solid #ddd;
    border-radius: 4px
}
</style>